<template>
    <!--  组件的交互-->
    <div class="demo">
        <h1>{{ msg }}</h1>
        <h2>姓名:{{ name }}</h2>
        <h2>性别:{{ sex }}</h2>
        <h2>年龄:{{ ages }}</h2>
        <button @click="upAge">点击我age+1</button>
    </div>
</template>

<style>
/*css样式*/
.demo {
    background: skyblue;
}
</style>


<script>
//组件交互的代码
//export default school分别暴露
export default {
    name: 'School', //开发者工具最终呈现的名字为School
    data() {
        return {
            msg:"我是一个要努力学习的人",
            ages:this.age
        }
    },
    methods: {
        upAge(){
            this.ages++
        }  
    },
    props:{
        name:{
            type:String,
            require:true
        },
        age:{
            type:Number,
            default:99
        },
        sex:{
            type:String
        }
    }
};
</script>